<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 业务管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>售货机申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--                    <el-form-item label="申请人">-->
<!--                        <el-input placeholder="1" v-model="form.username" :disabled="true">-->
<!--                        </el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="配送日期"prop="date1">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" value-format="yyyy-MM-dd" style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>
<!--                    <el-form-item label="配送区域">-->
<!--                        <el-cascader :options="options" v-model="form.options"></el-cascader>-->
<!--                    </el-form-item>-->
                    <el-form-item label="地点选择">
                    <div class="amap-page-container" style="width: 100%; height:300px;">
                        <el-amap ref="map"
                                 :amap-manager="amapManager"
                                 :center="center"
                                 :zoom="zoom"
                                 :plugin="plugin"
                                 :events="events"
                                 class="amap-demo">
                        </el-amap>
<!--                                                <p>{{ center }}</p>-->
                    </div>
                    </el-form-item>
                    <el-form-item label="经纬度"  prop="username">
                        <el-input type="text" rows="5" v-model="form.username" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="具体地址" prop="desc">
                        <el-input type="text" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">申请</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
    import { AMapManager } from "vue-amap";
    let amapManager = new AMapManager();
    import VDistpicker from 'v-distpicker'
    export default {
    name: 'baseform',
    components: {VDistpicker},
    data() {
        const self = this;
        return {
            options: [
                {
                    value: '福建省',
                    label: '福建省',
                    children: [
                        {
                            value: '厦门市',
                            label: '厦门市',
                            children: [
                                {
                                    value: '湖里区',
                                    label: '湖里区'
                                },
                                {
                                    value: '思明区',
                                    label: '思明区'
                                },  {
                                    value: '海沧区',
                                    label: '海沧区'
                                },  {
                                    value: '集美区',
                                    label: '集美区'
                                },  {
                                    value: '同安区',
                                    label: '同安区'
                                }, {
                                    value: '翔安区',
                                    label: '翔安区'
                                },
                            ]
                        },
                    ]
                },
            ],

            lng: "",
            lat: "",
            // address: "",
            // marker: "",
            amapManager,
            zoom: 15,
            center: [118.178342, 24.492459],
            events: {
                init: (o) => {
                    o.getCity((result) => {
                        // console.log(result);
                        // this.searchOption.city=result.city
                    });
                },
                moveend: () => {},
                zoomchange: () => {},
                click: (e) => {
                    self.lng = e.lnglat.lng;
                    self.lat = e.lnglat.lat;
                    self.center = [self.lng, self.lat];
                    this.form.username=this.center
                    let o = amapManager.getMap();
                    if (!self.marker) {
                        self.marker = new AMap.Marker({
                            position: e.lnglat,
                        });
                        self.marker.setMap(o);
                    }
                    self.marker.setPosition(e.lnglat);
                    let geocoder = new AMap.Geocoder({});

                    geocoder.getAddress(e.lnglat, function (status, result) {
                        if (status === "complete" && result.regeocode) {
                            self.address = result.regeocode.formattedAddress;
                        } else {
                            log.error("根据经纬度查询地址失败");
                        }
                    });
                },
            },
            form: {
                date1: '',
                date2: '',
                delivery: true,
                desc: '',
                // options: [],
                username: '',
            },rules: {
                date1: [
                    { required: true, message: '请选择安装时间', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入正确的地址', trigger: 'blur'}
                ],
                username: [
                    { required: true, message: '请选择安装的坐标', trigger: 'blur'}
                ],
            },
        };
    },
    methods: {
        onSubmit:function () {
            this.$axios.post("getyys", {
                    time1 :this.form.date1,
                    time2 :this.form.date2,
                    vmSite:this.form.desc,
                    name:localStorage.getItem('ms_username'),
                    coordinate:this.form.username
            }).then(resp => {
                if (resp) {
                    this.$message.success('提交成功申请成功');
                }
            })
        }
    }
};
</script>
<style scoped>
    .search-box {
        position: absolute;
        /*top: 25px;*/
        /*left: 20px;*/
    }
    .amap-page-container {
        position: relative;
    }
</style>
